<template>
  <div>
    <van-nav-bar title="我的学习">
      <template #right>
        <van-icon name="calendar-o" @click="$router.push('/studyCalendar')"/>
      </template>
      <template #left>
        <van-icon name="arrow-left" @click="$router.push('/mine')"/>
      </template>
    </van-nav-bar>
    <van-tabs>
      <van-tab :title="arr.name + '(' + arr.num + ')'">
        <ul class="ul">
          <li v-for="(item, index) in list" :key="index">
            <p class="title">{{ item.title }}</p>
            <p>
              <van-icon name="clock-o" />
              {{ item.start_play_date }}~{{ item.end_play_date }}(共{{
                item.is_buy_order
              }}课时)
            </p>
            <div class="progress">
              <van-progress inactive :percentage="0" :show-pivot="false" />
              已学习{{ item.progress_rate }}%
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template> 

<script>
import { myStudy } from "../../request/http";
export default {
  data() {
    return {
      list: [],
      arr: [],
    };
  },
  created() {
    myStudy().then((res) => {
      console.log(res);
      this.list = res.data.courseList;
      this.arr = res.data.typeNum[0];
      console.log(this.arr[0]);
    });
  },
};
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
  width: 90%;
  margin: 0 auto;
  li {
    border: 1px solid #e6e6e6;
    height: 3.387rem;
    margin-top: 0.4rem;
    border-radius: 0.133rem;
    .title {
      font-size: 0.427rem;
      padding-left: 0.267rem;
    }
    p {
      color: #777;
      padding-left: 0.267rem;
      display: flex;
      align-items: center;
    }
    .progress {
      color: #777;
      padding-left: 0.267rem;
      display: flex;
      align-items: center;
      .van-progress {
        width: 2.4rem;
        height: 0.107rem;
        background: #eee;
      }
    }
  }
}
</style>